<!--项目详情-->
<template>
	<!--	项目主要内容展示-->
	<el-row>
		<el-col :span="24">
			<el-card shadow="never">
				<el-descriptions :title="state.initData.projectName" direction="vertical" :column="4" border>
					<el-descriptions-item label="总金额">￥{{ state.initData.total }} 元</el-descriptions-item>
					<el-descriptions-item label="项目支出">￥{{ state.initData.expenditureAmount }} 元</el-descriptions-item>
					<el-descriptions-item label="预计收入">￥{{ state.initData.estimatedRevenue }} 元</el-descriptions-item>
					<el-descriptions-item label="订单类型">{{ state.initData.projectType ==0?"自营":"三方" }}</el-descriptions-item>
					<el-descriptions-item label="项目状态">
						<el-tag type="primary">{{ state.statusMap[state.initData.status] || '未知进度' }}</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="创建时间">{{ state.initData.createTime }}</el-descriptions-item>
					<el-descriptions-item label="预计交付时间">{{ state.initData.deliveryTime }}</el-descriptions-item>
					<el-descriptions-item label="项目编号">{{ state.initData.code }}</el-descriptions-item>
					<el-descriptions-item label="备注">
						<span :style="{ whiteSpace: 'pre-line' }">
							{{ state.initData.remarks }}
						</span>
					</el-descriptions-item>
				</el-descriptions>
			</el-card>
		</el-col>
	</el-row>

	<el-row>
		<el-col :span="24">
			<el-card shadow="never">
				<el-button type="primary" round @click="remarksDocumentVisible = true">添加备注</el-button>
				<el-button type="primary" round @click="updateStatus">修改状态</el-button>
			</el-card>
		</el-col>
	</el-row>
	<!--	用户人员安排-->
	<el-row>
		<el-col :span="24">
			<el-card shadow="never">
				<template #header>
					<div class="card-header">
						<div style="color: red;font-weight: 700;margin-bottom: 20px">参与项目人员</div>
						<el-button type="primary" @click="addUserDialogVisible = true">添加项目人员</el-button>
						<el-button type="primary" @click="handDialogVisible = true">手动录入</el-button>
					</div>
				</template>
				<el-table :data="state.initData.userList">
					<el-table-column prop="id" label="编号" align="center" width="60" />
					<el-table-column prop="userName" label="姓名" align="center" width="80" />
					<el-table-column prop="responsibleContent" label="负责功能" align="center" />
					<el-table-column prop="amount" label="项目费用" align="center" />
					<el-table-column prop="status" label="完成进度" align="center">
						<template #default="scope">
							<el-text v-if="scope.row.status == 0 " type="warning">未完成</el-text>
							<el-text v-else-if="scope.row.status == 1" type="success">已完成</el-text>
						</template>
					</el-table-column>
					<el-table-column prop="isPay" label="是否支付费用" align="center">
						<template #default="scope">
							<el-tag v-if="!scope.row.isPay" type="warning">未支付</el-tag>
							<el-tag v-else type="success">已支付</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="remark" label="备注" align="center" />
					<el-table-column prop="createTime" label="录入时间" align="center" />
					<el-table-column fixed="right" label="操作" align="center">
						<template #default="scope">
							<el-button v-if="!scope.row.isPay" link type="primary" size="small"
												 @click.prevent="userDel(scope.row.id)">移除
							</el-button>
							<el-button v-if="!scope.row.isPay" link type="primary" size="small" @click.prevent="settle(scope.row)">
								结算
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
		</el-col>
		<!--	添加人员-->
		<el-dialog
			v-model="addUserDialogVisible"
			title="添加项目组人员"
			width="1000"
			style="height:1000px;"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:show-close="false"
		>
			<el-steps style="max-width: 1000px" :active="addUserActive" align-center>
				<el-step title="选取用户" />
				<el-step title="编辑文字" />
			</el-steps>
			<el-row v-if="addUserActive == 1">
				<el-col :span="24">
					<el-card shadow="never">
						<template #header>
							<div class="card-header">
								<el-button @click="addUserActive +=1 ">向用户推送链接</el-button>
							</div>
						</template>
						<el-table
							:data="state.userList"
							highlight-current-row
							@current-change="tableHandleCurrentChange">
							<el-table-column prop="id" label="编号" align="center" />
							<el-table-column label="头像" align="center">
								<template #default="props">
									<el-avatar :size="50" :src="props.row.imageUrl" />
								</template>
							</el-table-column>
							<el-table-column prop="nickName" label="用户昵称" align="center"></el-table-column>
							<el-table-column prop="userName" label="用户姓名" align="center"></el-table-column>
							<el-table-column prop="cellPhone" label="手机号" align="center" />
						</el-table>
						<div class="pagination-container">
							<el-pagination
								:page-size="state.pageValidate.pageSize"
								layout="prev, pager, next"
								:total="state.pageValidate.total"
								@current-change="handleCurrentChange"
							/>
						</div>
					</el-card>
				</el-col>
			</el-row>
			<el-row v-if="addUserActive == 2">
				<el-col :span="24">
					<el-card shadow="never">
						<el-form
							ref="ruleFormRef"
							:rules="rules"
							:model="state.addUserForm"
							label-width="auto"
							style="max-width: 400px">
							<el-form-item label="负责模块" prop="responsibleContent">
								<el-input v-model="state.addUserForm.responsibleContent" />
							</el-form-item>
							<el-form-item label="支付金额" prop="amount">
								<el-input v-model="state.addUserForm.amount" />
							</el-form-item>
							<el-form-item label="完成时间" prop="completionTime">
								<el-date-picker
									v-model="state.addUserForm.completionTime"
									type="date"
									placeholder="选择日期"
									format="YYYY年MM月DD日"
									value-format="YYYY年MM月DD日"
								/>
							</el-form-item>
							<el-form-item label="备注" prop="remark">
								<el-input type="textarea" :rows="5" v-model="state.addUserForm.remark" />
							</el-form-item>
						</el-form>
					</el-card>
				</el-col>
			</el-row>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="cancel">取消</el-button>
					<el-button v-if="addUserActive !==1" @click="addUserActive -=1 ">上一步</el-button>
					<el-button v-if="addUserActive !==2" @click="addUserActive +=1 ">下一步</el-button>
					<el-button v-if="addUserActive ==2" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
				</div>
			</template>
		</el-dialog>
		<!--	用户结算-->
		<el-dialog
			v-model="settleDialogVisible"
			title="用户结算"
			width="500"
		>
			<el-form
				ref="formRef"
				:model="state.settleForm"
				label-width="auto">
				<el-form-item
					label="支付凭证"
					prop="voucher"
					:rules="[{required: true,message: '请上传支付凭证',trigger: 'blur',}]">
					<el-upload
						class="avatar-uploader"
						:action="fileUploadUrl"
						:show-file-list="false"
						accept=".jpg,.png"
						:on-success="productImgHandleSuccess"
					>
						<img v-if="state.settleForm.voucher" :src="state.settleForm.voucher" class="avatar" />
						<el-icon v-else class="avatar-uploader-icon">
							<Plus />
						</el-icon>
					</el-upload>
				</el-form-item>
				<el-form-item label="项目状态">
					<el-select v-model="state.settleForm.status" placeholder="请选择">
						<el-option label="未完成" :value="0" />
						<el-option label="已完成" :value="1" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="settleSubmitForm(formRef)">确定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</el-row>
	<!--	支付记录-->
	<!--	<el-row>-->
	<!--		<el-col :span="24">-->
	<!--			<el-card shadow="never">-->
	<!--				<template #header>-->
	<!--					<div class="card-header">-->
	<!--						<el-button type="primary" @click="uploadShow.show = true">添加支付记录</el-button>-->
	<!--					</div>-->
	<!--				</template>-->
	<!--				<el-table :data="tableData" stripe>-->
	<!--					<el-table-column prop="date" label="支付序号" align="center" />-->
	<!--					<el-table-column prop="date" label="支付金额" align="center" />-->
	<!--					<el-table-column prop="date" label="支付时间" align="center" />-->
	<!--					<el-table-column prop="date" label="支付凭证" align="center" />-->
	<!--					<el-table-column prop="date" label="备注" align="center" />-->
	<!--					<el-table-column fixed="right" label="操作" align="center">-->
	<!--						<template #default="scope">-->
	<!--							<el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">移除</el-button>-->
	<!--						</template>-->
	<!--					</el-table-column>-->
	<!--				</el-table>-->
	<!--			</el-card>-->
	<!--		</el-col>-->
	<!--	</el-row>-->
	<!--	文档上传展示-->
	<!--	<el-row>-->
	<!--		<el-col :span="24">-->
	<!--			<el-card shadow="never">-->
	<!--				<template #header>-->
	<!--					<div class="card-header">-->
	<!--						<el-button type="primary" @click="uploadShow.show = true">添加文档</el-button>-->
	<!--					</div>-->
	<!--				</template>-->
	<!--				<el-table :data="tableData" stripe>-->
	<!--					<el-table-column prop="date" label="文档编号" align="center" />-->
	<!--					<el-table-column prop="date" label="文档名称" align="center" />-->
	<!--					<el-table-column prop="date" label="文档状态" align="center" />-->
	<!--					<el-table-column prop="date" label="文档格式" align="center" />-->
	<!--					<el-table-column prop="date" label="备注" align="center" />-->
	<!--					<el-table-column fixed="right" label="操作" align="center">-->
	<!--						<template #default="scope">-->
	<!--							<el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">移除</el-button>-->
	<!--							<el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">查看文档</el-button>-->
	<!--						</template>-->
	<!--					</el-table-column>-->
	<!--				</el-table>-->
	<!--			</el-card>-->
	<!--		</el-col>-->
	<!--	</el-row>-->
	<!--	订单展示-->
	<el-row>
		<el-col :span="24">
			<el-card shadow="never">
				<template #header>
					<div class="card-header">
						<div style="color: red;font-weight: 700;margin-bottom: 20px">
							支付历史
							已经支付：{{ state.yespayment }}元 剩余支付：{{ state.nopayment }}元
						</div>
						<!--						<el-button type="primary">创建订单</el-button>-->
						<el-button type="primary" @click="handAddOrderDialogVisible = true">手动录入</el-button>
					</div>
				</template>
				<el-table :data="state.initData.projectOrderList">
					<el-table-column prop="id" label="编号" />
					<el-table-column prop="orderName" label="订单名称" align="center" />
					<el-table-column prop="orderAmount" label="订单金额" align="center" />
					<el-table-column prop="date" label="支付状态" align="center">
						<template #default="scope">
							<el-tag v-if="!scope.row.status" type="warning">未支付</el-tag>
							<el-tag v-else type="success">已支付</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="sendType" label="推送类型" align="center">
						<template #default="scope">
							<el-text v-if="scope.row.sendType === 0" type="warning">短信</el-text>
							<el-text v-else-if="scope.row.sendType === 1" type="success">公众号</el-text>
							<el-text v-else-if="scope.row.sendType === 2" type="success">手动录入</el-text>
						</template>
					</el-table-column>
					<el-table-column prop="mobile" label="手机号" align="center" />
					<el-table-column prop="serialNumber" label="流水号" align="center" />
					<el-table-column prop="createTime" label="创建时间" align="center" />
					<!--					<el-table-column fixed="right" label="操作" >-->
					<!--						<template #default="scope">-->
					<!--							<el-button  link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">添加凭证</el-button>-->
					<!--						</template>-->
					<!--					</el-table-column>-->
				</el-table>
			</el-card>
		</el-col>
	</el-row>
	<el-dialog
		v-model="documentVisible"
		title="上传资源"
		width="60%"
	>
		<el-container>
			<el-aside width="300px">分类</el-aside>
			<el-container>
				<el-header>
					<el-button type="text" link>上传</el-button>
					<el-button type="text" link>删除</el-button>
				</el-header>
				<el-main>Main</el-main>
			</el-container>
		</el-container>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="documentVisible = false">Cancel</el-button>
				<el-button type="primary" @click="documentVisible = false">
					Confirm
				</el-button>
			</div>
		</template>
	</el-dialog>
	<!--	手动录入开发人员-->
	<el-dialog
		v-model="handDialogVisible"
		title="添加项目组人员"
		width="50%">
		<el-form :model="state.handData"
						 ref="ruleFormRef"
						 :rules="handRules"
						 label-width="120px">
			<!-- 项目状态 -->
			<el-form-item label="项目状态" prop="status">
				<el-radio-group v-model="state.handData.status">
					<el-radio :label="0">未完成</el-radio>
					<el-radio :label="1">已完成</el-radio>
				</el-radio-group>
			</el-form-item>
			<!-- 负责模块 -->
			<el-form-item label="负责模块" prop="responsibleContent">
				<el-input v-model="state.handData.responsibleContent" placeholder="请输入负责模块" />
			</el-form-item>
			<!-- 真实姓名 -->
			<el-form-item label="真实姓名" prop="userName">
				<el-input v-model="state.handData.userName" placeholder="请输入真实姓名" />
			</el-form-item>
			<!-- 支付金额 -->
			<el-form-item label="支付金额" prop="amount">
				<el-input-number v-model="state.handData.amount" placeholder="支付金额" :min="0" />
			</el-form-item>
			<!-- 完成时间 -->
			<el-form-item label="完成时间" prop="completionTime">
				<el-input v-model="state.handData.completionTime" placeholder="请输入完成时间" />
			</el-form-item>

			<!-- 是否支付 -->
			<el-form-item label="是否支付" prop="isPay">
				<el-switch v-model="state.handData.isPay" active-text="是" inactive-text="否" />
			</el-form-item>
			<!-- 支付凭证 -->
			<el-form-item label="支付凭证" prop="voucher">
				<el-input v-model="state.handData.voucher" placeholder="请输入支付凭证" />
			</el-form-item>

			<!-- 备注 -->
			<el-form-item label="备注" prop="remark">
				<el-input v-model="state.handData.remark" placeholder="请输入备注" />
			</el-form-item>

			<div slot="footer" class="dialog-footer">
				<el-button @click="handDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="handSubmitForm(ruleFormRef)">提交</el-button>
			</div>
		</el-form>
	</el-dialog>
	<!--	手动录入项目订单-->
	<el-dialog
		v-model="handAddOrderDialogVisible"
		title="手动添加订单"
		width="60%"
	>
		<el-form :model="state.handOrderForm"
						 ref="ruleFormRef"
						 :rules="handOrderRules"
						 label-width="120px">
			<!-- 订单名称 -->
			<el-form-item label="订单名称" prop="orderName">
				<el-input v-model="state.handOrderForm.orderName" placeholder="请输入订单名称" />
			</el-form-item>
			<!-- 支付类型 -->
			<el-form-item label="支付类型" prop="payType">
				<el-radio-group v-model="state.handOrderForm.payType">
					<el-radio :label="2">淘宝付款</el-radio>
					<el-radio :label="3">微信付款</el-radio>
					<el-radio :label="4">支付宝付款</el-radio>
				</el-radio-group>
			</el-form-item>

			<!-- 订单金额 -->
			<el-form-item label="订单金额" prop="orderAmount">
				<el-input-number v-model.m.number="state.handOrderForm.orderAmount" placeholder="订单金额" :min="0" />
			</el-form-item>

			<!-- 支付凭证 -->
			<el-form-item label="支付凭证" prop="paymentProof">
				<el-input v-model="state.handOrderForm.paymentProof" placeholder="请输入支付凭证" />
			</el-form-item>

			<!-- 备注 -->
			<el-form-item label="备注" prop="remarks">
				<el-input v-model="state.handOrderForm.remarks" placeholder="请输入备注" />
			</el-form-item>


			<div slot="footer" class="dialog-footer">
				<el-button @click="handAddOrderDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="handOrderSubmitForm(ruleFormRef)">提交</el-button>
			</div>
		</el-form>
	</el-dialog>
	<!--	添加备注-->
	<el-dialog
		v-model="remarksDocumentVisible"
		title="添加项目备注"
		width="500"
	>
		<el-input
			v-model="state.initData.remarks"
			:rows="6"
			type="textarea"
			placeholder="填写项目备注"
		/>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="remarksDocumentVisible = false">退出</el-button>
				<el-button type="primary" @click="remarksAddBtn">
					确认
				</el-button>
			</div>
		</template>
	</el-dialog>

	<!--	状态修改-->
	<el-dialog
		v-model="statusDocumentVisible"
		title="项目状态修改"
		width="500"
	>
		<el-form :model="state.statusForm" label-width="auto" style="max-width: 600px">
			<el-form-item label="项目状态">
				<el-select v-model="state.statusForm.status" placeholder="选择项目状态">
					<el-option
						v-for="status in statusList"
						:key="status.value"
						:label="status.label"
						:value="status.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="项目类型">
				<el-select v-model="state.statusForm.projectType" placeholder="选择项目类型">
					<el-option label="自营" :value=0 />
					<el-option label="三方" :value=1 />
				</el-select>
			</el-form-item>
		</el-form>


		<template #footer>
			<div class="dialog-footer">
				<el-button @click="statusDocumentVisible = false">退出</el-button>
				<el-button type="primary" @click="statusAddBtn">确认</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
import { postRequest } from '~/composables/http'
import type { FormInstance, FormRules, UploadProps } from 'element-plus'
import { addDevelop, addProjectOrderApi, addUserApi } from '~/api/project'
const fileUploadUrl = computed(() => `${import.meta.env.VITE_API_BASE_URL}/api/file/upload?type=7`);
const formRef = ref<FormInstance>()
const { params } = useRoute()
const ruleFormRef = ref<FormInstance>()
const projectId = params.id
const addUserDialogVisible = ref(false)
const settleDialogVisible = ref(false)
const handDialogVisible = ref(false)
const handAddOrderDialogVisible = ref(false)
const documentVisible = ref(false)
const remarksDocumentVisible = ref(false)
const statusDocumentVisible = ref(false)
// 添加用户步骤
const addUserActive = ref(1)
const state = reactive(<any>{
	yespayment: 0,
	nopayment: 0,
	imgPath: import.meta.env.VITE_IMG_PATH,
	initData: {},
	userList: [],
	pageValidate: {
		pageNo: 1,
		pageSize: 5,
		total: 0
	},
	statusForm: {},
	query: {
		id: null,
		isAccredit: null,
		cellPhone: null
	},
	addUserForm: {
		userId: ''
	},
	settleForm: {},
	statusMap: {
		0: '未开发',
		1: '正在开发',
		2: '待交付',
		3: '已完成',
		4: '已退回'
	},
	handData: {},
	handOrderForm: {}
})
// 计算属性：将 statusMap 转换成数组形式
const statusList = computed(() =>
	Object.keys(state.statusMap).map((key) => ({
		value: Number(key as Status),
		label: state.statusMap[key as Status]
	}))
)

const handRules = reactive<FormRules<any>>({
	projectId: [{ required: true, message: '项目编号不能为空', trigger: 'blur' }],
	status: [{ required: true, message: '请选择项目状态', trigger: 'change' }],
	responsibleContent: [{ required: true, message: '负责模块不能为空', trigger: 'blur' }],
	userName: [{ required: true, message: '真实姓名不能为空', trigger: 'blur' }],
	amount: [{ required: true, message: '支付金额不能为空', trigger: 'blur' }],
	completionTime: [{ required: false }],
	remark: [{ required: false }],
	isPay: [{ required: true, message: '请选择是否支付', trigger: 'change' }],
	voucher: [{ required: false }]
})
const handOrderRules = reactive<FormRules<any>>({
	orderName: [{ required: true, message: '订单名称不能为空', trigger: 'blur' }],
	orderAmount: [{ required: true, message: '订单金额不能为空', trigger: 'blur' }],
	sendType: [{ required: true, message: '请选择推送类型', trigger: 'change' }],
	mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
	projectId: [{ required: true, message: '项目编号不能为空', trigger: 'blur' }],
	remarks: [{ required: false }],
	serialNumber: [{ required: false }]
})
const rules = reactive<FormRules<any>>({
	responsibleContent: [
		{ required: true, message: '负责模块不能为空', trigger: 'blur' }],
	amount: [
		{ required: true, message: '支付金额不能为空', trigger: 'blur' }]
})
const settleSubmitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			if (state.settleForm.status == 0) {
				toast.warning('项目状态不能是未完成！')
				return
			}
			http.post(`/api/admin/project/user/settle`, state.settleForm).then(() => {
				toast.success('结算成功')
				settleDialogVisible.value = false
				init()
			})
		}
	})
}
/**
 * 结算
 * @param data
 */
const settle = (data: any) => {
	settleDialogVisible.value = true
	state.settleForm.projectUserId = data.id
	state.settleForm.status = data.status
}

//凭证文件上传成功时的钩子
const productImgHandleSuccess: UploadProps['onSuccess'] = (response) => {
	//把地址截取获取图片位置
	state.settleForm.voucher = response.data.url
}

/**
 * 为项目添加用户
 * @param formEl
 */
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid) => {
		if (valid) {
			state.addUserForm.projectId = projectId
			addUserApi(state.addUserForm).then(() => {
				toast.success('添加成功')
				addUserDialogVisible.value = false
				state.addUserForm = {}
				init()
			})
		}
	})
}


/**
 * 手动提交
 * @param formEl
 */
const handSubmitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid) => {
		if (valid) {
			state.handData.projectId = projectId
			addUserApi(state.handData).then(() => {
				toast.success('手动添加成功')
				handDialogVisible.value = false
				state.handData = {}
				init()
			})
		}
	})
}
/**
 * 手动提交订单
 * @param formEl
 */
const handOrderSubmitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid) => {
		if (valid) {
			state.handOrderForm.projectId = state.initData.code
			addProjectOrderApi(state.handOrderForm).then(() => {
				toast.success('手动添加订单成功')
				handAddOrderDialogVisible.value = false
				state.handOrderForm = {}
				init()
			})
		}
	})
}


function cancel() {
	addUserDialogVisible.value = false
	addUserActive.value = 1
}


/**
 * 添加备注
 */
const remarksAddBtn = () => {
	addDevelop({ id: projectId, remarks: state.initData.remarks }).then(() => {
		toast.success('修改成功！')
		remarksDocumentVisible.value = false
	})
}
/**
 * 添加状态
 */
const statusAddBtn = () => {
	addDevelop(state.statusForm).then(() => {
		toast.success('修改成功！')
		statusDocumentVisible.value = false
		init()
	})
}

/**
 * 获取用户列表
 */
const userList = () => {
	postRequest('/api/admin/user/page', {
		pageValidate: { pageValidate: state.pageValidate },
		params: state.query
	}).then((res: any) => {
		state.userList = res.data.lists
		state.pageValidate.pageNo = res.data.pageNo
		state.pageValidate.pageSize = res.data.pageSize
		state.pageValidate.total = res.data.count
	})
}

/**
 * 选中用户
 * @param val
 */
const tableHandleCurrentChange = (val: any | undefined) => {
	state.addUserForm.userId = val.id
	addUserActive.value += 1
}
const handleCurrentChange = (val: number) => {
	state.pageValidate.pageNo = val
	userList()
}


const userDel = (id: any) => {
	http.delete(`/api/admin/project/user/${id}`).then(() => {
		toast.success('移除成功！')
		init()
	})
}


/**
 * 修改状态拼接
 */
const updateStatus = () => {

	state.statusForm.id = projectId
	state.statusForm.status = state.initData.status
	state.statusForm.projectType = state.initData.projectType
	statusDocumentVisible.value = true
}

/**
 * 初始化
 */
function init() {
	http.get(`/api/admin/project/${projectId}`).then(response => {
		state.initData = response.data

		const totalOrderAmount = state.initData.projectOrderList.reduce((sum, order) => {
			return sum + (order.orderAmount || 0) // 防止 orderAmount 为 undefined 或 null
		}, 0)
		state.yespayment = totalOrderAmount
		state.nopayment = state.initData.total - state.yespayment
	})
	userList()
}

onMounted(() => {
	const loading = ElLoading.service({
		lock: true,
		text: 'Loading',
		background: 'rgba(0, 0, 0, 0.7)'
	})
	init()
	loading.close()
})


</script>


<style scoped>
.pagination-container {
	display: flex;
	justify-content: center;
	margin-top: 20px; /* 可根据需要调整外边距 */
}

.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}

:deep(.avatar-uploader .el-upload ){
	border: 1px dashed var(--el-border-color);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
	border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}

</style>
